<template>
	<view :class="['vh100',{'dark':theme == 'dark'}]">
		<view :class="['wrap','funs',{'darksss':theme=='dark'}]">
			<u-row gutter="16" class="topo">
				<u-col span="4">
					<view class="demo-layout lists3">
						<text class="text3">{{$t('bico.W318')}}（USDT）</text>
						<text class="text4">{{usePrice}}</text>
						<view @click="funsItemClick(1)">
							<text class="text5">
								<image class="funsItemImage" src="../../static/business/mcgg.png" mode=""></image>
							</text>
							<text class="text6">
								{{$t('bico.W319')}}
							</text>
						</view>
					</view>
				</u-col>
				<u-col span="4">
					<view class="">
					</view>
				</u-col>
				<u-col span="4">
					<view class="">
					</view>
				</u-col>

			</u-row>

			<u-row gutter="40" justify="around">
				<u-col span="3">
					<view class="">
						<view class="bgtxt demo-layout bg-purple txt1">{{$t('bico.W320')}}</view>
						<view class="bgtxt">{{periodicTotal}} USDT</view>

					</view>
				</u-col>
				<u-col span="3">
					<view class="">
						<view class="bgtxt demo-layout bg-purple txt2">{{$t('bico.W321')}}</view>
						<view class="bgtxt">{{winTotal}} USDT</view>

					</view>
				</u-col>
				<u-col span="3">
					<view class="">
						<view class="bgtxt demo-layout bg-purple txt3">{{$t('bico.W322')}}</view>
						<view class="bgtxt">{{noWinTotal}} USDT</view>

					</view>
				</u-col>
			</u-row>

			<!-- 化率进度百分百选择 -->
			<u-line-progress :striped="true" :striped-active="true" active-color="#2979ff" :percent="type.rate">
			</u-line-progress>

			<u-row gutter="16">
				<u-col span="3" v-for="(item,index) in list" :key="index" @click="changeType(index)">
					<view class="demo-layout lists2 " :class="index == activeIndex ? 'active' : ''">
						{{typeMap[item.type]}}
					</view>
				</u-col>
				
			</u-row>

			<view class="flex alcenter mt10 plr20">
				<image src="../../static/image/tssp.png" class="wt15 h15"></image>
				<view class="chengse ft14 plr20"> {{$t('bico.W323')}} {{type.minNum}} USDT ≤ {{$t('bico.W324')}} ≤ {{type.num}} USDT</view>
			</view>
			<!-- 间隔槽 -->
			<u-gap height="40" bg-color=""></u-gap>
			<u-line color="#5559691f"></u-line>

			<view class="">
				<view>
					<u-field v-model="price" label="USDT" :placeholder="$t('bico.W325')">
					</u-field>
				</view>
			</view>
			<!-- 间隔槽 -->
			<u-gap height="40" bg-color=""></u-gap>
			<u-button size="default" type="primary" @click="submit">{{$t('bico.W326')}}</u-button>
		</view>

		<view class="xlai">
			<!-- 间隔槽 -->
			<u-gap height="20" bg-color=""></u-gap>
			<view class="">
				<view class="bzzx">{{$t('bico.W327')}}</view>
			</view>

			<!-- 间隔槽 -->
			<u-gap height="20" bg-color=""></u-gap>
			<u-line color="#5559691f"></u-line>
			<u-collapse>
				<u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">
					{{item.body}}
				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'vuex';
	import {
		finPeriodicList,
		wallet,finPeriodicOrderAdd,
		finPeriodicMyOrderList
	} from '../../common/apiString.js'
	import {
		myMixins
	} from '@/common/myMixins.js' //加入全局下拉刷新
	export default {
		mixins: [myMixins],
		data() {
			return {
				typeMap:{
					'1':this.$t('bico.W328'),
					'2':this.$t('bico.W329'),
					'3':this.$t('bico.W330'),
					'4':this.$t('bico.W331'),
				},
				activeIndex:0,
				type:{},
				usePrice: '0.000', //钱包可用余额
				price: '', //存款金额
				periodicTotal: '0.00', // 总投资额
				winTotal: '0.00', // 收益总额
				noWinTotal: '0.00', // 预计收益
				list:[],

				itemList: [{
					head: this.$t('bico.W332'),
					body: this.$t('bico.W333'),
					open: true,
					disabled: true
				}, {
					head: this.$t('bico.W334'),
					body: this.$t('bico.W335'),
					open: false,
				}, {
					head: this.$t('bico.W336'),
					body: this.$t('bico.W337'),
					open: false,
				}],
			}
		},
		onShow(){
			this.getWallet()
			this.getFinPeriodicList()
			this.getOrderList()
		},
		computed: {
			...mapState({
				theme: state => state.theme
			}),
		},
		methods: {
			submit(){
				var that = this
				if(!that.price || that.price< that.type.minNum){
					that.$utils.showLayer(this.$t('bico.W338'),+that.type.minNum);
					return
				}
				
				var valuation="USDT"
				that.$utils.initDataToken({
						url: finPeriodicOrderAdd,
						type: 'post',
						data: {
							periodicId: that.type.id,
							amount: that.price| 0,
							
						}
					},
					res => {
						that.$utils.showLayer(this.$t('bico.W339'),);
						setTimeout(function() {
							that.funsItemClick(1)
						}, 1500);
					}
				);
			},
			changeType(index){
				var that = this
				that.type = that.list[index]
				that.activeIndex = index
			},
			getWallet() {
				var that = this
				var valuation="USDT"
				that.$utils.initDataToken({
						url: wallet,
						type: 'post',
						data: {
							valuation: valuation,
							hide: 'N',
							type: 'WALLET',
						}
					},
					res => {
						var l = res.list;
						for (var i = 0; i < l.length; i++) {
							if (l[i].type == valuation) {
								that.usePrice = Number(l[i].usedPrice).toFixed(4);
							}
						}
					}
				);
			},

			getFinPeriodicList() {
				var that = this
				that.$utils.initDataToken({
						url: finPeriodicList,
						type: 'post',

					},
					res => {
						that.list = res
						that.changeType(0)
					}
				);
			},
			getOrderList() {
				var that = this
				that.$utils.initDataToken({
						url: finPeriodicMyOrderList,
						type: 'post',

					},
					res => {
						console.log(res)

						that.periodicTotal = res.principal
						that.winTotal = res.winTotal
						that.noWinTotal = res.noWinTotal
					}
				);
			},
			onLoad() {
				uni.setNavigationBarTitle({
					title: this.$t('bico.W340'),
				})
				this.$utils.setTheme(this.theme);
				
			},
			funsItemClick(index) {
				if (index == 1) {
					uni.navigateTo({
						url: '/pages/financial/records' 
					})
				};
			},
		},
	}
</script>
<style lang="scss">
	.container {
		padding: 20rpx 60rpx;
	}

	.userinfo {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.userinfo-avatar {
		width: 128rpx;
		height: 128rpx;
		margin: 20rpx;
		border-radius: 50%;
	}

	.lists {
		margin: 10px 0;
	}

	.active {
		background-color: RGB(41, 121, 255);
		color: rgb(255, 255, 255)
	}

	.lists2 {
		line-height: 40px;
		text-align: center;
		border: 1px solid #5559691f;
		cursor: pointer;
	}

	.lists3 {
		line-height: 40px;


		cursor: pointer;
	}

	.u-row {
		margin: 10px 0;
		width: 100%;
		height: 90px;

		/* background-image: url(/static/img/businessbg.d8194963.png); */
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		border-radius: 10px;
		padding: 0px;
	}

	.topo {
		margin: 20px 0;
		width: 100%;
		height: 100px;
		background: linear-gradient(359.57deg, #3e38ec 3.55%, #3e38ec 99.56%);
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		border-radius: 10px;
		padding: 10px;
	}

	.wrap {
		padding: 2vw;
		// width: 100%;
		// height: 24vw;
		// background-color: #3e38ec;
		// background-size: 100%;
		// background-position: center center;
		// border-radius: 0vw 0vw 4vw 4vw;
	}

	.u-row {
		margin: 40rpx 0;
	}

	.demo-layout {
		height: 80rpx;
		border-radius: 8rpx;
	}

	.bg-purple {
		background: #d3dce666;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.text3 {
		position: absolute;
		top: 14vw;
		right: 0;
		left: 8vw;
		color: #ffffff;
	}

	.text4 {
		position: absolute;
		top: 22vw;
		right: 0;
		left: 8vw;
		color: #ffffff;
		font-size: 6vw;
		font-weight: 700;
	}

	.text5 {
		position: absolute;
		top: 26vw;
		right: 0;
		left: 76vw;
		color: #ffffff;
	}

	.text6 {
		position: absolute;
		top: 24vw;
		right: 0;
		left: 84vw;
		color: #ffffff;
	}

	.funsItemImage {
		position: relative;
		top: -10vw;
		right: 0;
		left: 8vw;
		width: 6vw;
		height: 6vw;
		border-radius: 50%;
	}

	.xlai {
		padding-left: 15px;
		padding-right: 15px;
	}

	.bzzx {
		font-size: 4vw;
		font-weight: 700;
	}

	uni-view {
		font-size: 12px !important;

	}

	.u-collapse-head[data-v-3bf52cdf] {

		color: #808080 !important;
		font-size: 14px !important;

	}

	.bgtxt {
		position: relative;
		border: 0;
		display: inline-flex;
		overflow: visible;
		line-height: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		cursor: pointer;

		z-index: 1;
		box-sizing: border-box;
		transition: all 0.15s;
		font-size: 12px;
		height: 40px;
		line-height: 40px;
	}
</style>
